<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            display: block;
        }

        body{
            margin: 0px;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <script>
        var canvas = document.querySelector('canvas')
        var ctx = canvas.getContext('2d')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight

        function Rain(i) {
            this.x = i*40*Math.random()
            this.y = 0
            this.speed = Math.random() +1
            this.color = 'rgb(255,255,255)'
            this.text = '.'
        }
        function Draw_circle(x,y) {
            var r = 1
            let c1 = setInterval(function(){
            ctx.beginPath() 
            ctx.arc(x, y, r, 0, Math.PI * 2)  
            ctx.strokeStyle = 'white'
            ctx.stroke()
            ctx.closePath()
            r++
            var r_max = Math.floor(Math.random()*50+150)
            if(r>r_max){
                clearInterval(c1)
            }   
            },1000/60)
        }
        var arr = []
        for (var i = 0; i < canvas.width / 40; i++) {
            arr.push(new Rain(i))
        }

        setInterval(function () {
            ctx.fillStyle = 'rgba(135,206,235,0.05)'
            ctx.fillRect(0, 0, canvas.width, canvas.height)
            
        var max_height = 0
            for (var i = 0; i < arr.length; i++) {
                max_height = canvas.height - (Math.random()*(canvas.height/4))
                if (arr[i].y >= max_height) {
                    Draw_circle(arr[i].x,arr[i].y)
                    arr[i].y = 0
                    arr[i].speed = Math.random() +1
                    arr[i].x = i*40*Math.random()
                }
                ctx.beginPath()
                ctx.font = '20px 微软雅黑'
                ctx.fillStyle = arr[i].color;
                ctx.fillText(arr[i].text, arr[i].x, arr[i].y)
                ctx.closePath()
                arr[i].y += arr[i].speed;
            }

        }, 1000 / 60)
    </script>
</body>
</html>